<template>
  <div class="mes_tree bom_tree">
    <el-container>
      <el-header height="unset">
        <tree-search-from @search="handleSearch"></tree-search-from>
      </el-header>
      <el-main v-loading="isLoading">
        <el-scrollbar ref="scrollbar">
          <div class="search_empty" v-if="taskList.length === 0&&!isLoading">
            <img width="120" src="@/assets/img/pic_default_empt_search.png" alt="">
            <p class="no_data">暂无数据</p>
          </div>
          <el-tree
            v-else
            ref="elTree"
            class="tree_multi_line"
            node-key="label"
            :expand-on-click-node="false"
            :data="taskList"
            :default-expanded-keys="defaultExpandedKeys"
            :props="defaultProps"
            @node-click="handleNodeClick"
            @node-expand="handleNodeExpand"
            check-on-click-node
            highlight-current
          >
            <div class="custom_tree_node" slot-scope="{ node, data }">
              <div class="node_label" :class="{'tree_search_result': targetId === node.id}">
                <div class="label">
                  <span class="label_taskNumber">{{ node.label}}</span><span
                  v-if="node.level === 2">/{{data.product}}</span>
                </div>
                <div
                  @click.stop="handelExClick(data, node, index)"
                  :key="index"
                  v-for="(item, index) in data.workorders"
                  class="label_ex">
                  <div :class="{'auto_select': targetId === node.id || isAutoSelect(data, item)}">
                    {{item.number}}
                  </div>
                </div>
              </div>
            </div>
          </el-tree>
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import TreeSearchFrom from '../treeSearchForm/Index'
import treeUtil from '../treeUtil'
import TreeService from '../TreeService'

export default {
  name: 'BomWorkOrderTree',
  mixins: [TreeService],
  components: {
    TreeSearchFrom
  },
  data() {
    return {
      selectedNodeData: null, // 选中的节点数据
      selectedIndex: 0, // 自动选中的是第几个
      keyword: '', // 产品名/批次号
      taskList: [],
      targetId: null,
      treeClientHeight: 0,
      defaultProps: [{
        children: 'children',
        label: 'label',
        id: 'workorderId'
      }],
      defaultExpandedKeys: [], // 默认展开的节点
      isLoading: false // 数据加载中
    }
  },
  computed: {
    // 选中的工单ID
    selectedWorkorderId() {
      if (this.selectedNodeData !== null && this.selectedNodeData.hasOwnProperty('workorders')) {
        return this.selectedNodeData.workorders[this.selectedIndex].id
      } else {
        return null
      }
    },
    // 选中的工单号
    selectedWorkorderNumber() {
      if (this.selectedNodeData !== null && this.selectedNodeData.hasOwnProperty('workorders')) {
        return this.selectedNodeData.workorders[this.selectedIndex].number
      } else {
        return null
      }
    },
    // 选中的工单物料名称
    selectedName() {
      return this.selectedNodeData.name
    }
  },
  mounted() {
    this.initTaskNumberTree()
  },
  methods: {
    handleSearch(query) {
      this.initTaskNumberTree(query)
    },
    // 初始化任务号树，并将任务号展开
    async initTaskNumberTree(query) {
      let taskList = treeUtil.appendChildren(await this.getTaskNumberTree(query))
      this.$emit('selectNode', undefined)
      this.taskList = taskList
      this.defaultExpandedKeys = taskList.reduce((pre, cur) => [...pre, cur.label], [])
    },
    // 点击箭头展开节点
    async handleNodeExpand(data) {
      let node = this.$refs.elTree.store.nodesMap[data.label]
      // 当展开任务号时加载任务号下的工单数据
      if (node.level === 2) {
        node.loading = true
        node.expanded = false
        node.data.children = await this.getWorkOrderTree(data.label)
        node.expanded = true
        node.loading = false
        this.$nextTick(() => {
          // 只有一个子节点时直接展开全部下级
          if (Array.isArray(data.children) && data.children.length === 1) {
            treeUtil.expandChildNodes(node)
          }
        })
      }
      if (node.level === 3) {
        treeUtil.expandChildNodes(node)
      }
    },
    // 点击树上的节点,自动选中第0个工单
    handleNodeClick(data, node) {
      this.handelExClick(data, node, 0)
    },
    // 直接点击工单
    handelExClick(data, node, index) {
      this.targetId = null
      this.selectedNodeData = data
      this.selectedIndex = index
      if (node.isLeaf) {
        return this.$emit('selectNode', undefined)
      }
      if (node.level <= 2) {
        return this.$emit('selectNode', undefined)
      }
      this.$emit('selectNode', this.selectedWorkorderId, this.selectedWorkorderNumber, node.level, this.selectedName)
    },
    // 自动选中第this.selectedIndex个工单
    isAutoSelect(data, item) {
      return data === this.selectedNodeData && item.id === this.selectedWorkorderId
    },
  },
}
</script>

<style lang="less">
  .bom_tree_container {
    display: flex;
    overflow-x: hidden;
    height: calc(100% - 56px);
    .bom_tree {
      flex: 0 0 350px;
      border-right: 1px solid #dbe1e8;
      & + * {
        flex: 1;
        overflow-x: auto;
      }
    }
  }

  .mes_tree .tree_multi_line {
    display: inline-block;
    min-width: 100%;
    &.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
      background-color: #e5f7ff;
      .el-tree-node__expand-icon {
        color: #2196f3;
      }
    }
    .el-tree-node__content {
      height: auto;
      .el-tree-node__expand-icon {
        align-self: flex-start;
        margin-top: 4px;
      }
      .custom_tree_node {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .node_label {
          padding: 5px 0;
          width: 100%;
          .label {
            font-size: 14px;
            color: #333;
          }
          .label_ex {
            font-size: 13px;
            color: #7e8e9f;
            &:hover {
              color: #00b4ff;
            }
            div {
              height: 20px;
              line-height: 20px;
              border-radius: 2px;
              padding-left: 8px;
              &.auto_select {
                background-color: #00b4ff;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
</style>
